$head-width:100%;
$head-bgcolor:#0CC440;
$head-fontcolor:#fff;
$head-height:.88rem;
$left:left;
$head-font:.22rem;
$most-font:.23rem;
$foot-width:100%;
$foot-height:.88rem;
$ctn3-color:#C8C8C8;
$span:inline-block;
$login-width:5rem;
$login-height:4.5rem;
$fontSize:0.26rem;
$color:#666666;
$float:left;
$width:100%;
$imgWidth:3.13rem;
$navWidth:0.7rem;
$spanWidth:0.58rem;
$friendWidth:1.41rem;
html,body{
    width: 100%;
    height: 100%;
    font-family: "microsoft yahei";
}
html,body,ul,li,i,input,p{
    margin: 0;
    padding: 0;
}
ul li{
    list-style: none;
}
input{
    outline: none;
}
i{
    font-style: normal;
}

.iconfont{
    font-family: "iconfont";
    font-size:0.28rem;
    color:#fff;
    font-style:normal;
}

/* index*/
.index_box {
    width: 6.4rem;
    margin-bottom: .88rem;
    position: relative;
    height: 11rem;
   margin-top: 1.59rem;
    overflow-x: hidden;
}
.box1{
    width: 19.2rem;
     left: 0;
      height: 10rem;
  position: absolute;
}
 .gx_container1Nav,.gx_section2{
 width:$width;
 }
    .gx_container1Nav{
       div{
        font-size:$fontSize;
        color:$color;
        width:2rem;
        float:$float;
        text-align:center;
        margin-right:0.2rem;
        height:0.65rem;
        
       }
    }


    .gx_container1Nav{
    border-bottom:1px solid #d9d9d9;
    overflow:hidden;
    height:$navWidth;
    width:$width;
    line-height:$navWidth;
    position:fixed;
    z-index:10;
    top:0.88rem;
    background: rgba(255,255,255,0.6);
     }


    .gx_container1Nav{
    .footballGirl{
     margin-right:0;
    }
    }


    .gx_container1Nav{
    .footballLive{
     border-bottom:5px solid #0ec044;
    }
    }

    .gx_section1,.gx_section3{
        float: left;
      overflow: hidden;
    }
    .gx_section1 .gx_block,.gx_section3 .gx_block{
            float:left;
            width:3.15rem;
    }
     .gx_section1 .gx_block img,.gx_section3 .gx_block img{
     width:$imgWidth;
     height:$imgWidth;
     border:1px solid #e1e6e2;
     display:block;
     border-bottom:0;

     }
.gx_section1 .marginRight,.gx_section3 .marginRight{
    margin-right:0.1rem;
}
.gx_section1 .gx_block .word,.gx_section3 .gx_block .word{
    height:$spanWidth;
    font-size:0.23rem;
    line-height:$spanWidth;
    margin:0;
    font-family:"microsoft yahei";
    border:1px solid #e1e6e2;
    word-break:break-all;
    padding-left:0.2rem;
}
.gx_section1{
    width:6.4rem;
    position: absolute;
    left: 0;
}
.gx_section3{
    width: 6.4rem;
    position: absolute;
    left: 12.8rem;
}


/*the circle of friend*/
.gx_friend{
    width:$width;
    background:#f1f1f1;
    display:none;
}
.gx_marginTop{
    width:$width;
    margin-top:0.88rem;
    border-bottom:1px solid #e4e4e4;
    margin-bottom:0.1rem;
    background:#fff;
}
.gx_marginBottom{
    width:$width;
    border-bottom:1px solid #e4e4e4;
    margin-bottom:0.88rem;
    background:#fff;
}
.gx_friendCircle{
    background:#fff;
}
.gx_friendCircle .gx_friendName{
    height:$friendWidth;
    margin-left:0.23rem;
   
}
.gx_friendCircle .gx_friendName .gx_left{
    width:0.93rem;
    height:0.93rem;
    border-radius:$width;
    border:1px solid #a9a9a9;
    text-align:center;
    line-height:0.93rem;
    margin-top:0.21rem;
    float:left;
}
.gx_friendCircle .gx_friendName .gx_left img{
    height:0.8rem;
    width:0.8rem;
    overflow:hidden;
    border-radius:100%;
    margin-top:7px;
}
.gx_friendCircle .gx_friendName .gx_middle{
    float:left;
    width:3.3rem;
    padding-left:0.2rem;
}
.gx_friendCircle .gx_friendName .gx_middle .first{
    height:0.8rem;
    font-size:0.28rem;
    line-height:0.8rem;
    font-weight:bold;
}
.gx_friendCircle .gx_friendName .gx_middle .second{
    font-size:0.23rem;
    color:#989898;
    word-break:break-all;
}
.gx_friendCircle .gx_friendName .gx_right{
 width:1.4rem;
 float:left;
}
.gx_friendCircle .gx_friendName .gx_right i{
    display: block;
    float:left;
    font-size:0.3rem;
    margin-top:0.3rem;
    color: #D1D1D1;
}
.gx_friendCircle .gx_friendName .gx_right i::after{
    content:'\e604';
     color: #D1D1D1;
    font-family:iconfont;
}
.gx_friendCircle .gx_friendPhoto{
    
    height:5.67rem;
    overflow:hidden;
}
.gx_friendCircle .gx_friendPhoto img{
    width:$width;
    height:$width;
}
.gx_friendCircle .gx_friendWord{
    font-size:0.22rem;
    height:0.65rem;
    line-height:0.65rem;
    font-weight:bold;
    font-family:'microsoft yahei';
    margin-left:0.3rem;


}
/* PhotoCut*/
.gx_photoCut{
    display: none;
    width:$width;
    margin-top:0.98rem;
}
.gx_photoCut  .gx_photoTop{
    width:$width;
    height:5.91rem;
    border-bottom:2px solid #cacaca;
    position: relative;
    padding-bottom: 0.24rem;
}
#canvas2{
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
}
#canvas2{
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
}

.gx_photoCut  .gx_photoTop{
    .mask2{
        width: 100%;
        height: 5.03rem;
        background: rgba(0,0,0,0.5);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
    }
    .mask1{
        width: 100%;
        height: 5.03rem;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 7;
    }
}
.gx_photoCut .gx_photoImg{
    width:$width;
    height:4.77rem;

}
.gx_photoCut .gx_photoImg img{
    width:$width;
    height:$width;
}
.gx_photoCut  .gx_photoTop .gx_photoWord{
    width:$width;
  height:1.14rem;
 
}
.gx_photoCut  .gx_photoTop .gx_photoWord div{
    font-size:0.23rem;
    color:#15c934;
    height:0.58rem;
    border:1px solid #0fc244;
    width:2.28rem;
    border-radius:5%;
    text-align:center;
    line-height:0.58rem;
    float:left;
    margin-top:0.27rem;
    cursor:pointer;
}
.gx_photoCut .gx_photoTop .gx_photoWord .buttonFirst{
      margin-left:0.32rem;
      margin-right:1.24rem;
}
.gx_photoCut .gx_photoBottom{
    width:$width;
    height:3.07rem;
}
.gx_photoCut .gx_photoBottom .gx_photoView{
    width:2.63rem;
    height:1.48rem;
    border:1px solid red;
    margin:0.39rem auto;
    display: block;
}
.gx_photoCut .gx_photoBottom .gx_photoSubmit{
     width:4.17rem;
     height:0.6rem;
     background:#0cc440;
     display:block;
     color:#fff;
     font-size:0.25rem;
     text-decoration:none;
   margin:0 auto;
   margin-top:0.35rem;
   text-align:center;
   line-height:0.6rem;
   border-radius:5px;
   font-weight:bold;
}




.lefthide{
    width: 50%;
    height: 100%;
    background: rgba(88,125,55,.8);
    position: fixed;
    z-index: 20;
    left: 0;
    top: 0;
    display: none;
}

.lefthide .hPhoto{
    width: 1.57rem;
    height: 1.57rem;
    border-radius: 50%;
    margin: 0.34rem auto;
    overflow: hidden;
    #leftTou{
         width: 100%;
         height: 100%;
    }
}

.lefthide .name{
    height: 0.59rem;
    background: rgba(78,125,60,.8);
    font-size: 0.23rem;
     color: #fff;
     text-align: center;
     line-height: 0.59rem;
}
.lefthide .sign{
    line-height: 0.46rem;
    font-size: 0.23rem;
     color: #A5BCAB;
     width: 2.4rem;
     margin: 0.2rem auto;
}
.lefthide{
    .kind{
    font-size: 0.23rem;
    color: #fff;
    line-height: 0.58rem;
    border-bottom: 1px solid #658D70;
    margin: 0;
    text-align: center;
    }
}
.lefthide{
    .flive{
    border-top: 1px solid #658D70;
  }
} 
.leftmask{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    background: rgba(0,0,0,.2);
    display: none;
}
.publicTop{
    width: $head-width;
    height: $head-height;
    background:$head-bgcolor;
    line-height: 0.88rem;
    position: fixed;
    top: 0;
    z-index: 10;
}
.publicTop{
    .leftmenu{
    float:$left ;
    text-align: center;
    width: 0.88rem;
    height: 0.88rem;
    display: block;
 } 
}
.publicTop{
    .leftmenu::before{
    content: '\e600';
    font-size: 0.26rem;
 }
}
  
.publicTop{
    .topMiddle{
        font-size:$head-font;
        margin-left: 1.15rem;
        width: 2.4rem;
        height: 0.48rem;
        border-radius: 0.24rem;
        float: $left;
        margin-top:.2rem ;
         color: $head-fontcolor;
         overflow: hidden;
    }
} 
.publicTop{
    .topMiddle{
        span{
           width: 1.2rem; 
           height: 0.48rem;
           text-align: center;
           line-height: 0.48rem;
           display: block;
           float: $left;
        }
    }
} 
.publicTop{
    .topMiddle{
        span#news{
           background: rgba(255, 255, 255, 0.5);
        }
    }
} 
.publicTop{
    .topMiddle{
        span#focus{
           background: rgba(255, 255, 255, 0.3);
           color: rgba(255,255,255,.7);
        }
    }
    .topMiddle1{
        font-size:0.31rem;
        margin-left: 1.15rem;
        width: 2.4rem;
        height: 0.48rem;
        float: $left;
        margin-top:.2rem ;
        color: $head-fontcolor;
        display: none;
        text-align: center;
        line-height: 0.48rem;
    }
} 

.index_box .container2{
    box-sizing: border-box;
     width: 6.4rem;
    overflow: hidden;
        position: absolute;
    left: 6.4rem;
}
.container2{
    .left{
        width: 3.12rem;
        float: left;
    }
}
.container2{
    .right{
        width: 3.12rem;
        float: right;
    }
}
.container2{
    .box{
        border: 1px solid #E3E3E3;
        margin-top: 0.1rem;
    }
}
.container2{
    .box{
        img{
            width: 3.1rem;
            height: 2.1rem;
            display: block;
            border: 0;
        }
    }
}
.container2 .ms {
  font-size: 0.23rem;
  line-height: 0.37rem;
  margin: 0.04rem auto;
  width: 2.62rem;
}
.container8{
    margin-top: $head-height;
    height: auto;
    display: none;
}
.container8{
    .grjs{
        padding: 0.18rem 0.23rem;
         overflow: hidden;
    }
}
.container8{
    .grjs{
        .grtx{
            width: 0.93rem;
            height: 0.93rem;
            border-radius: 50%;
            background: url(../img/meng.jpg) no-repeat center;
            border: 1px solid #B1B1B1;
            float: $left;
        }
    }
}
.container8{
    .jsr{
        float: left;
        margin-left: 0.2rem;
    }
}
.container8{
    .jsr{
        .jsn{
            font-size: 0.27rem;
        }
    }
}
.container8 .jsr .jss{
    font-size: $most-font;
    margin-top: 0.24rem;
}
.container8 .nav{
    overflow: hidden;
} 
.container8 .nav span{
    font-size: $most-font;
    width: 2.01rem;
    float: left;
    margin-right: 0.18rem;
    text-align: center;
    height: 0.45rem;
    line-height: 0.45rem;
}
.container8 .nav{
    .last{
        margin-right: 0;
    }
}
.container8{
    .nav{
      .act{
        border-bottom: 5px solid #0CC53C;
     }  
    }
}
.container8{
    .photos{
        img{
            width: 3.14rem;
            height: 3.14rem;
            float: left;
        }
    }
}

.container3{
    overflow: hidden;
    width: 100%;
    height: 9rem;
     padding-top: .88rem;
     box-sizing:border-box ;
     display: none;
    form{
        height: .64rem;
        width: 100%;
        border-bottom: solid 1px #C8C8C8;
        .search{
            height: .46rem;
            width: 5.14rem;
            float: left;
            border: solid 1px #C8C8C8;
            border-radius: 5px;
            margin: .08rem .12rem 0 .1rem;
            font-size: .22rem;
            color: $ctn3-color;
            padding-left: .1rem;
            box-sizing: border-box;
        }
        .btn{
            display: block;
            float: left;
            background: #0CC440;
            height: .46rem;
            width: .92rem;
            margin-top: 8px;
            color: #fff;
            font-size: .22rem;
            border-radius: .1rem;
        }
        
    }
    .display{
        display: none;
        font-size: 0;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding-left: .24rem;
        z-index: 1000;
           li{
               font-size: .22rem;
               height: .64rem;
               line-height: .64rem;
               width: 100%;
               float: left;
               border-bottom: solid 2px #D9D9D9;
           }
        }
    .color{
        display: none;
        height: .1rem;
        width: $head-width;
        background: #F1F1F1;
    }
     .color1{
         position: fixed;
         bottom: .90rem;
        height: .1rem;
        width: $head-width;
        background: #F1F1F1;
    }
    .attention{
        height: 1.5rem;
        width: 100%;
         border-bottom:solid 1px #E5E5E5 ;
        .left{
            width: 5.4rem;
            height: 1.5rem;
            float: left;
           .pic{
                width:.97rem;
                height: .97rem;
                border: solid 2px #ADADAD;
                border-radius: 50%;
                overflow: hidden;
                float: left;
                margin: .34rem .2rem 0 .23rem;
                img{
                    display: block;
                    height: 100%;
                    width: 100%;
                }
               
            }
            span{
                    display: $span;
                    float: left;
                }
            .name{
                    width: 3.8rem;
                    word-break: break-all;
                    font-size: .26rem;
                    color: #000000;
                    height: .46rem;
                    margin-top: .34rem;
                    line-height: .46rem;
                }
                .subject{
                    width: 3.8rem;
                    word-break: break-all;
                    font-size: .26rem;
                    color: #989898;
                    height: .46rem;
                    line-height: .46rem;
                }
        }
        .right{
            font-size: .22rem;
            color: #FFFFFF;
            height: .36rem;
            width: .76rem;
            margin-top: .36rem;
            background: #00CA42;
            line-height: .36rem;
            text-align: center;
            float: left;
        }
    }
    .mask{
        width: $head-width;
        height: 11rem;
        background: rgba(155,155,155,0.3);
        position: fixed;
        top: .88rem;
        left: 0;
        z-index: 10;
        display: none;
    }
    .login{
        display: none;
        font-size: 0;
        position: fixed;
        left: .7rem;
        top: 2.15rem;
        width: $login-width;
        height: $login-height;
        background: #FFFFFF;
        z-index: 100;
        border: solid 1px #929292;
        border-radius: .1rem;
        .exit{
            height: .6rem;
            width: .6rem;
            position: absolute;
            right: 0;
            top: 0;
            background: #FFFFFF;
            z-index: 101;
            font-size: .22rem;
            color: #E0E0E0;
            text-align: center;
            line-height: .6rem;
        }
        .login-top{
            width: 100%;
            height: .6rem;
            text-align: center;
            line-height: .6rem;
            font-size: .26rem;
            color: #10C633;
            border-bottom: solid 1px #EBEBEB;
        }
        .login-bottom{
            height: 3.9rem;
            width: $login-width;
            padding: 0 .44rem 0 .44rem;
            box-sizing: border-box;
            .login-phone{
                width: 4.1rem;
                font-size: .24rem;
                height: .76rem;
                line-height: .76rem;
                border: 0;
                border-bottom: solid 1px #B2B2B2;
            }
            .uesrname-error{
                position: absolute;
                font-size: .24rem;
                color: red;
                top: .9rem;
                right: 0;
                display: none;
            }
            .login-password{
                border: 0;
                width: 4.1rem;
                font-size: .24rem;
                height: .6rem;
                line-height: .6rem;
                border-bottom: solid 1px #B2B2B2;
            }
             .password-error{
                position: absolute;
                font-size: .24rem;
                color: red;
                top: 1.6rem;
                right: 0;
                display: none;
            }
             .no-id{
                font-size: .24rem;
                height: 1.08rem;
                line-height: 1.08rem;
                text-align: center;
                a{
                    color: #9FE7BF;
                    font-size: .26rem;
                }
               
            }
             .btn{
                    display: block;
                   height: .6rem;
                   color: #FFFFFF;
                   font-size: .24rem;
                   letter-spacing: .3rem;
                   width: 100%;
                   background: #0CC440;
                }
        }
    }
    .register{
        font-size: 0;
        height: 4.02rem;
        width: 100%;
        background: #FFFFFF;
        z-index: 12;
        position: fixed;
        bottom: 0;
        left: 0;
        display: none;
        .register-top{
            width: 100%;
            height: .72rem;
            border-bottom: solid 2px #EBEBEB;
           .exit{
                width: 1rem;
                height: .72rem;
                text-align: center;
                line-height: .72rem;
                display: block;
                float:left;
                font-size: .22rem;
                color: #ABABAB;
                }
            .ensure{
                width: 1rem;
                height: .72rem;
                text-align: center;
                line-height: .72rem;
                display: block;
                float:left;
                font-size: .22rem;
                color: #11BA39;
                float: right;
                }
        }
       .register-bottom{
           height: 3.28rem;
           width: 100%;
           box-sizing: border-box;
           padding:0 .42rem 0 .42rem;
           .register-phone{
                width: 5.6rem;
                font-size: .24rem;
                height: .9rem;
                line-height: 1.1rem;
                border: 0;
                border-bottom: solid 2px #B2B2B2;
            }
            .phone-error{
                position: absolute;
                font-size: .24rem;
                color: red;
                top: 1.2rem;
                right: 0;
                display: none;
            }
               .pwd-error{
                position: absolute;
                font-size: .24rem;
                color: red;
                top: 2rem;
                right: 0;
                display: none;
            }
              .null-error{
                position: absolute;
                font-size: .24rem;
                color: red;
                top: 3rem;
                right: 0;
                display: none;
            }
            .register-password{
                border: 0;
                width: 5.6rem;
                font-size: .24rem;
                height: .9rem;
                line-height: .9rem;
                border-bottom: solid 2px #B2B2B2;
            }
            .register-name{
                border: 0;
                width: 5.6rem;
                font-size: .24rem;
                height: .9rem;
                line-height: .9rem;
                border-bottom: solid 2px #B2B2B2;
            }
       }
    }
}

.footer{
    height: $foot-height;
    width: $foot-width;
    box-sizing: border-box;
    position: fixed;
    background: #fff;
    bottom: 0;
   
    .left{
         border-top: solid 2px #CDCDCD;
        float: left;
        height: $foot-height;
        width: 2.72rem;
    .font1{
           
            width: 1.1rem;
             height: $foot-height;
            text-align: center;
            float: left;
            .icon1::after{
                display: block;
                content: '\e606';
                font-size: .32rem;
                margin: 0.12rem 0 .1rem 0;
            }
            span:nth-of-type(1){
                color: #35AE51;
            }
            i{
                display: block;
                font-size: .22rem;
                color: #35AE51;
            }
        }
        .font2{
            text-align: center;
             height: $foot-height;
            .icon1::after{
                display: block;
                content: '\e603';
                font-size: .32rem;
                margin: .12rem 0 .1rem 0;
            }
            i{
                display: block;
                font-size: .22rem;
                color: #CECECE;
            }
        }
    }
    .right{
        border-top: solid 2px #CDCDCD;
        height: $foot-height;
        width: 2.72rem;
        float: right;
        .font1{
            width: 1.64rem;
             height: $foot-height;
            text-align: center;
            float: left;
            .icon1::after{
                display: block;
                content: '\e602';
                font-size: .32rem;
               
                 margin: 0.12rem 0 .1rem 0;
            }
            i{
                display: block;
                font-size: .22rem;
                color: #CECECE;
            }
        }
        .font2{
            text-align: center;
             height: $foot-height;
            .icon1::after{
                display: block;
                content: '\e601';
                font-size: .32rem;
                margin: .12rem 0 .1rem 0;
            }
            i{
                display: block;
                font-size: .22rem;
                color: #CECECE;
            }
        }
    }
    .center{
        position: fixed;
        bottom: 0;
        left: 2.74rem;
        height: 1.06rem;
        width: 1.06rem;
        background: #fff;
        border: solid 2px #D6D6D6;
        border-radius: 50%;
        .icon1::after{
                display: block;
                content: '\e605';
                font-size: .54rem;
                 height: 1.06rem;
                width: 1.06rem;
                text-align: center;
                line-height: 1.06rem;
            }
    }
     span{
                color: #CECECE;
            }
}

.mine{
    height: auto;
    overflow: hidden;
}
